iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

30天入門JavaScript系列 第 20

【Day 20】物件(二) 建構器函式跟new運算子

  • 分享至 

  • xImage
  •  



之前提到,建立一個物件會像這樣寫

var obj = {
  name: 'John',
  age: 30,
};


如果想要建立大量同類型物件時,用這種方式就很沒效率,會希望有個函式來幫忙完成,像這樣子

function makePerson(name, age) {
  var o = {
    name: name,
    age: age,
  };

  return o;
}

var person1 = makePerson('John', 30);
var person2 = makePerson('Mary', 18);
var person3 = makePerson('Lin', 25);

寫成這樣就能一直呼叫來產生新物件,但這樣有個問題,
這三個物件除了都有name跟age以外沒有關聯,沒辦法確定他們是同一種類型


所以有了別的寫法(ES5)

function People(name, age) {
  this.name = name;
  this.age = age;
}

var person2 = new People('Mary', 18);
var person3 = new People('Lin', 25);

console.log(person2);
console.log(person3);

執行結果
https://ithelp.ithome.com.tw/upload/images/20200920/20129836VLsE70O7IU.png
People()是一個函式建構器,用建構器來建立物件的話就能顯示之間的關聯了(都是由People()建立的)


用new運算子呼叫函式會發生的事:

  1. 建立一個新的空物件(以下簡稱新物件)
  2. 將這個新物件的constructor的屬性指向函式建構器(這例子下是People())
  3. 把this指向這個新物件
  4. 不使用return關鍵字時,會回傳this(就是這個新物件)

注意函式建構器需要加new運算子來呼叫才會正常作用,
拿new來呼叫一般函式或是不用new呼叫函式建構器都會產生非預期的結果


Q:為什麼People()第一個字要大寫?
A:因為函式建構器跟一般函式的使用方式不同(要加new),所以用大寫提醒區別

Q:函式建構器有return會怎麼樣?
A:如果return一個非物件,return會被無視而維持回傳新物件
但如果return物件,就會回傳該物件

Q:建立關聯能幹甚麼,constructor屬性又是?
A:等原型篇會詳細說

Q:this是甚麼?
A:明天、明天一定說


上一篇
【Day 19】利用閉包達成私有變數、記憶化
下一篇
【Day 21】this
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言